<template>
  <main class="article shadow">
    <a-table
     :columns="columns" 
    :data-source="data"
    :pagination="pagination"
    @change="handleChange"
    >
        <template #type="{text}">
        
            <a-tag :color="useColor(text)"
            >
            <!-- {{record}}可以看到很多的数据与属性名 -->
              {{text}}
            </a-tag>
        
        </template>
<template #edit>
          <a-button class="mx-1" type="danger">删除文章</a-button>
          <a-button class="mx-1" type="primary">更新内容</a-button>
          <a-button class="mx-1">查看内容</a-button>
        </template>
</a-table>
<!-- 添加直接跳编辑器的地方 -->
<section class="action">
    <a-button type="primary" @click="toEditorPage">创作</a-button>
</section>
</main>
</template>
<script>
    //按需加载组件
    import {
        Table
    } from "ant-design-vue";
    //加载数据配置
    import {
        articleViewConfig
    } from "@vp/manage/article.js";
    import {
        useColorMap
    } from "@vp/show/color.js";
    //引入useRouterParamChange路由参数id导航
    import {
        useRouteNameToPage,
        useRouteParamChange
    } from "@u/router.js";

    //引入与
    import {
        useLinkedRouterParam
    } from "@u/route.js"
    export default {
        components: {
            [Table.name]: Table, //a-table也可以这样命名
        },
        setup() {
            //定义相关赋值
            const {
                columns,
                data,
                pagination
            } = articleViewConfig;
            const colorMap = new Map([
                ["blog", "#009688"],
                ["book", "#2196F3"],
            ]);
            const useColor = useColorMap(colorMap);

            //定义页码变化事件
            const pageNParamChange = useRouteParamChange("pageNum")
                // const handleChange = ({
                //     current
                // }) => console.log(current); //会打印出当前页代表的属性名current
            pagination.current = useLinkedRouterParam("pageNum");
            const handleChange = ({
                current
            }) => pageNParamChange(current);


            const toEditorPage = useRouteNameToPage("ManageEditor");
            // //返回出数据 让模板里绑定
            return {
                data,
                columns,
                useColor,
                pagination,
                handleChange,
                toEditorPage
            };
        },
    };
</script>
<style scoped>
    .article {
        margin: 20px;
        padding: 10px;
        border-radius: 8px;
    }
    
    .action {
        text-align: center;
    }
</style>